import React from "react";
import "@/common/css/App.css"
import {NavLink, Route, Switch, Redirect} from "react-router-dom"
import Count from "@/pages/Count.jsx"
import CountWithRedux from "@/pages/CountWithRedux.jsx"
import CountWithReactRedux from "@/pages/CountWithReactRedux.jsx"
import Home from "@/pages/Home.jsx"

export default class App extends React.Component {
  render() {
    return (
        <div className="app">

          <div className="left">
            <NavLink activeClassName="active" to="/home">home</NavLink>
            <NavLink activeClassName="active" to="/count">count</NavLink>
            <NavLink activeClassName="active" to="/countWithRedux">countWithRedux</NavLink>
            <NavLink activeClassName="active" to="/countWithReactRedux">countWithReactRedux</NavLink>
          </div>
          <div className="right">
            <Switch>
              {/*switch 表示匹配成功后不再向下匹配*/}
              {/*exact表示精准匹配*/}
              <Route exact path="/countWithReactRedux" component={CountWithReactRedux}></Route>
              <Route exact path="/countWithRedux" component={CountWithRedux}></Route>
              <Route exact path="/count" component={Count}></Route>
              <Route path="/home" component={Home}></Route>
              <Redirect to="/home"></Redirect>
            </Switch>
          </div>
        </div>
    )
  }
}
